<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>    
<% request.setCharacterEncoding("UTF-8"); %>    
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title> </title>
<!-- 로컬-->
<link href="../css/style.css" rel="stylesheet" type="text/css">
<link href="../css/reset.css" rel="stylesheet" type="text/css">
<link href="../css/lib.css" rel="stylesheet" type="text/css">
<link href="../css/list_table.css" rel="stylesheet" type="text/css">
<!-- jQuery -->
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<!-- 부트스트랩 -->
<link href="../css/bootstrap.min.css" rel="stylesheet" media="screen">
<script src="../js/bootstrap.min.js"></script>
<!-- Javascript -->
<script>
//화면 로딩 시 실행
$(document).ready(function(){
	 $("#searchDetail").css({ // 상세 검색 항목
		  "display"			: "none"
	})
	, $(".creditsearch").css({
		  "width"			: "1000px"
		, "margin-left"		: "10px"
	});
});

//'상세검색' 버튼 눌렀을 때 화면에 보이게/안보이게 하기
/* function searchDetail(){ 
	$("#searchDetail").each(function() {
	    if ($(this).css("display") == "none") {
	    	$("#searchDetail").css({
	    		"display" : ""
	    	});
	    } else {
	    	$("#searchDetail").css({
	    		"display" : "none"
	    	});
	    }
	});
} */
function searchDetail(){ 
	$("#searchDetail").slideToggle("slow");
}
//'조회' 버튼을 눌렀을 때
function ap_list_search(){
	alert("결재번호로 조회");
}
</script>
</head>
<body>
 <h1>결재원장<small>Approval</small></h1>
            <!-- 검색박스시작 -->
            <div class="creditsearch">
                <form name="" method="" action="">
                    <fieldset>
                        <div class="cre_search">
                        <label><b>결재번호</b>: </label>
                        <input class="w110px" type="text" name="" title="글입력박스" />
                        <input type="button" name="" value="검색" class="pinkbtn cp" onclick="ap_list_search()" />
                        <input type="button" name="" id="btnSrchDetail" value="고급검색" class="bluebtn cp" onclick="searchDetail()"/>
                        </div>
                    </fieldset>
                </form>
            </div>
            <div class=".col-lg- col-md-1" id="searchDetail">
                <form class="form-inline" role="form">
				  <div class="form-group">
				    <label class="sr-only" for="exampleInputEmail2">Email address</label>
				    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
				  </div>
				  <div class="form-group">
				    <label class="sr-only" for="exampleInputPassword2">Password</label>
				    <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
				  </div>
				  <div class="checkbox">
				    <label>
				      <input type="checkbox"> Remember me
				    </label>
				  </div>
				  <button type="submit" class="btn btn-default">Sign in</button>
				</form>
            </div>
            <!-- 검색박스종료 -->
            
            <div id="ap_table" class="container">
	            <div id="ap_colums">
		            <p class="col_title_first"><b>결재번호</b></p>
		            <p class="col_title"><b>계약번호</b></p>
		            <p class="col_title"><b>사원명</b></p>
		            <p class="col_title"><b>진행상태</b></p>
		            <p class="col_title"><b>신청일자</b></p>
		            <p class="col_title"><b>요청자</b></p>
		            <p class="col_title"><b>승인자</b></p>
		            <p class="col_title"><b>등록일</b></p>
		            <p class="col_title_last"><b>수정일</b></p>
	            </div>
				<div class="ap_row container">
					<p id="p_first">&nbsp;</p>
					<p>&nbsp;</p>
					<p>&nbsp;</p>
					<p>&nbsp;</p>
					<p>&nbsp;</p>
					<p>&nbsp;</p>
					<p>&nbsp;</p>
					<p>&nbsp;</p>
					<p id="p_last">&nbsp;</p>
				</div>
            </div>
			
</body>
</html>